<template>
  <md-popup v-model="show" position="bottom">
    <md-popup-title-bar only-close :title="$t('components.confirm.title')" title-align="ceenter" @cancel="show = false" />
    <div class="component-confirm">
      <div class="money">{{ form.money[0] }}<b>{{ form.money.length > 1 ? form.money[1] : '' }}</b></div>
      <md-field>
        <md-field-item :title="$t('components.confirm.address')" :content="userData.uuid" solid />
        <md-field-item :title="$t('components.confirm.to')" :content="form.to" solid />
        <md-field-item :title="$t('components.confirm.gas')" :content="form.gas" solid />
      </md-field>
      <div style="padding: 20px">
        <md-button type="primary" @click="handle" round>{{ $t('components.confirm.ok') }}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { asset } from '@/api/box'
import { toast } from '@/style'
import { t } from '@/lang'
import { userData } from '@/model/user'
import { initData, initUpdate } from '@/model'
import Nav from '@/components/nav.vue'

const show = ref(false)
const form = ref({ money: [] })

// 回调
const callback = ref(null)

const open = (money, to, gas, func) => {
  if(!money[0] || !to) {
    return toast(t('components.confirm.error'))
  }
  show.value = true
  form.value = { money, to, gas: initData.value[gas]}
  
  // 回调
  callback.value = func
}

// 执行回调
const handle = () => {
  show.value = false
  callback.value()
}

initUpdate()
defineExpose({ open })

</script>
<style lang="scss" scoped>
  .component-confirm{
    background: #fff;
    .money{
      padding: 20px 0 0;
      text-align: center;
      font-size: 30px;
      b{
        font-size: 18px;
        padding-left: 5px;
        color: #888;
      }
    }
  }
</style>